<script setup lang="ts">

import {toRefs} from "vue";
import {Share} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {copyText} from "../../utils/Utils.ts";

interface Props {
  userId: number;
  username?: string | undefined;
  size?: number | undefined;
}

const props = defineProps<Props>();
const {userId, username} = toRefs(props)

const copyAt = () => {
  if (username.value) copyText(`[@${username.value}]`, '@代码')
  else if (userId.value) copyText(`[@${userId.value}]`, '@代码')
  else ElMessage.warning('复制失败')
}

const copyCode = () => {
  const text = username.value || `用户${userId.value}`
  copyText(`[uid=${userId.value}]${text}[/uid]`, `论坛代码`)
}

</script>

<template>
  <el-dropdown placement="bottom" trigger="click" effect="light">
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>
          <el-link target="_blank" :href="`https://bbs.nga.cn/nuke.php?func=ucp&uid=${userId}`">官方地址</el-link>
        </el-dropdown-item>
        <el-dropdown-item>
          <el-link @click="copyAt">@TA</el-link>
        </el-dropdown-item>
        <el-dropdown-item>
          <el-link @click="copyCode">论坛代码</el-link>
        </el-dropdown-item>
        <el-dropdown-item>
          <el-link @click="copyText(userId,'用户ID')">UID</el-link>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
    <el-icon :size="size">
      <Share class="clickable"/>
    </el-icon>
  </el-dropdown>
</template>

<style scoped>

</style>